<style>
    .layui-input-block { margin-left: 150px;}
    .layui-form-label { width: 120px; line-height: 15px}
</style>

<div class="page">
    <h1>表单组件 Form</h1>
    <div class="line"></div>
    <h2>自由、开放的配置化表单组件</h2>
    <br>
    <h3 style="color:#FF5722">应需求更改，下一版本即将推出不需要根据元素定位显示表单位置的表单组件</h3>
    <h3 style="color:#FF5722">此组件依然存在，不会进行重构和删除，但会基于该组件进行封装</h3>
    <br>
    <h2>示例表单 （基于 layui）</h2>
    <div class="line"></div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <br>
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <sup style="color: red;">*</sup>单行文本:</label>
                        <!-- id="apiNumber"  -->
                        <!-- 为放置表单元素的标签添加唯一标识以便在js中查找  -->
                        <div class="layui-input-block" id="string"></div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <sup style="color: red;">*</sup>下拉菜单:</label>
                        <div class="layui-input-block" id="select"></div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <sup style="color: red;">*</sup>日期选择器:</label>
                        <div class="layui-input-block" id="inputDate"></div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">单选框:</label>
                        <div class="layui-input-block" id="radio"></div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">多选框:</label>
                        <div class="layui-input-block" id="checkBox"></div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">多行文本:</label>
                        <div class="layui-input-block" id="textarea"></div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">富文本编辑器:</label>
                        <div class="layui-input-block" id="CKeditor"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button type="button" type="button" class="layui-btn layui-btn-normal" id="getEvent">取值</button>
                        <button type="button" type="button" class="layui-btn layui-btn-normal" id="setEvent">赋值</button>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md6">
            <pre class="line-numbers"><code class="language-js">// 示例代码
// 创建表单元素
var _form = icu.form({
    type: 'mergeByOldData',
    onError: function (errorMessage, event, key) {
        console.log(errorMessage, event, key);
    },
    onScrollError: function (errorMessage, event, key) {
        // 此段代码用于定位表单错误信息位置
        // $('#content') 在实际业务逻辑中，需要替换为滚动条所在元素对象
        var scrollTop = $('#content').scrollTop() + event.html.offset().top - 100;
        $('#content').animate({ scrollTop: scrollTop }, 300);
        icu.alert.error({
            text: errorMessage
        });
    },
});
// 创建表单对象
_form.$setOptions([
    {
        key: 'string',
        type: 'input',
        el: this.$el.find('#string'),
        verify: {
            text: '测试输入框',
            rules: 'notNull'
        },
    }, {
        key: 'select',
        type: 'select',
        el: this.$el.find('#select'),
        data: 'OptionSide:Gender',
        verify: {
            text: '测试输入框',
            rules: 'notNull'
        },
    },
    {
        key: 'inputDate',
        type: 'inputDate',
        el: this.$el.find('#inputDate'),
        verify: {
            text: '测试输入框',
            rules: 'notNull'
        },
    },
    {
        key: 'radio',
        type: 'radio',
        el: this.$el.find('#radio'),
        data: 'OptionSide:Gender'
    },
    {
        key: 'checkBox',
        type: 'checkList',
        checkAll: false,
        el: this.$el.find('#checkBox'),
        getType: ',',
        data: 'OptionSide:Gender'
    },
    {
        key: 'textarea',
        type: 'textarea',
        el: this.$el.find('#textarea'),
    },
    {
        key: 'CKeditor',
        type: 'CKeditor',
        el: this.$el.find('#CKeditor'),
    },
]);
// 表单取值
this.$el.find('#getEvent').click(function () {
    _form.$get(function (value) {
        icu.alert.normal({
            text: JSON.stringify(value)
        })
    });
});
// 表单赋值
this.$el.find('#setEvent').click(function () {
    _form.$set({
        string: '测试',
        select: '1',
        inputDate: '2020-09-07',
        radio: '1',
        checkBox: '1,2',
        textarea: 'TEST',
        CKeditor: '&lt;p&gt;&lt;strong&gt;asdasd&lt;/strong&gt;&lt;/p&gt;',
    });
});</code></pre>

        </div>
    </div>
    <br>
    <br>

    <h2>基本使用配置</h2>
    <div class="line"></div>
    <br>
    <br>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <br>
            <h3>创建表单元素对象</h3>
            <div class="line"></div>
            <pre class="line-numbers"><code class="language-js">// 创建表单对象
var _form = icu.form({
    // 表单数据处理类型
    // all 代表取全部表单值
    // onlyChange 代表只取有改变的值
    // mergeByChange 代表只取有改变的值，并且与set方法传入对象进行混合
    // mergeByOldData 代表取全部值，并且与set方法传入对象进行混合
    type: 'mergeByOldData', 
    onError: function (errorMessage, event, key) {
        // 当任意表单元素触发 onError事件时，主表单都会接到响应错误
        // 每一个错误事件都会接到错误请求
        // 用于表单整体错误显示
    },
    onScrollError: function (errorMessage, event, key) {
        // 当任意表单元素触发 onError事件时，主表单都会接到响应错误，
        // 但只接受第一次传入的错误事件
        // 用于表单错误定位
    },
});








</code></pre>
        </div>
        <div class="layui-col-md6">
            <br>
            <h3>页面元素布局设置</h3>
            <div class="line"></div>
            <pre class="line-numbers"><code class="language-html">&lt;!-- 表单元素设置 --&gt;
&lt;!-- 建议使用栅格布局对表单进行处理 --&gt;
&lt;div class="layui-row"&gt;
    &lt;div class="layui-col-md6"&gt;
        &lt;div class="layui-form-item"&gt;
            &lt;label class="layui-form-label"&gt;
            &lt;sup&gt;*&lt;/sup&gt;接口编号:&lt;/label&gt;
            &lt;!-- id="apiNumber"  --&gt;
            &lt;!-- 为放置表单元素的标签添加唯一标识以便在js中查找  --&gt;
            &lt;div class="layui-input-block" id="apiNumber"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="layui-col-md6"&gt;
        &lt;div class="layui-form-item"&gt;
            &lt;label class="layui-form-label"&gt;
            &lt;sup&gt;*&lt;/sup&gt;接口名称:&lt;/label&gt;
            &lt;div class="layui-input-block" id="apiName"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="layui-col-md12"&gt;
        &lt;div class="layui-form-item"&gt;
            &lt;label class="layui-form-label"&gt;
            &lt;sup&gt; &lt;/sup&gt;关 键 词:&lt;/label&gt;
            &lt;div class="layui-input-block" id="apiKeyWords"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
        </div>
        <div class="layui-col-md6">
            <br>
            <h3>为表单对象添加元素</h3>
            <div class="line"></div>
            <pre class="line-numbers"><code class="language-js">// 添加表单元素方法
_form.$setOptions([
    // 接口详情
    // 全部表单类型 (目前存在的表单元素)
    // input: 单行文本,
    // checkList: 复选框,
    // inputDate: 时间选择器,
    // select: 下拉菜单,
    // textarea: 多行文本,
    // radio: 单选框,
    // CKeditor: 富文本编辑器,
    // uploadFileEx: 上传文件组件,
    // 所有表单组件详细参数与表单元素对象参数一致
    {
        key: 'String', // 表单Key值
        type: 'input', // 表单类型 单行文本
        el: this.$el.find('#apiNumber'), // 表单元素输出位置
    }, {
        key: 'Select', // 表单Key值
        type: 'select', // 表单类型 下拉菜单
        el: this.$el.find('#apiNumber'), // 表单元素输出位置
        data : 'OptionSide:Gender' // 下拉菜单获取字典项
    }, 
    ...
]);

</code></pre>
        </div>
        <div class="layui-col-md6">
            <br>
            <h3>表单组件方法</h3>
            <div class="line"></div>
            <pre class="line-numbers"><code class="language-js">// 表单赋值
// 根据表单元素的key值进行赋值和取值操作
_form.$set({
    id : 'formId',
    String : 'String',
    Select : 'Select',
    ...
});

// 表单取值
_form.$get(function(value){
    // 当全部表单元素验证后，则返回表单值
    // 任意表单元素未通过，不会执行该方法
    // value = {
    //     id : 'formId',
    //     String : 'String',
    //     Select : 'Select',
    //     ...
    // }
});

// 表单只读属性控制
// 传入 true，全部表单元素更改为只读状态
// 传入 false，全部表单更改为可读写状态
_form.$changeReadonlyForAll(true);
            </code></pre>
        </div>
    </div>
    <br>
    <br>



</div>